<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v2.0.0/minemap.css">
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <script src="//minedata.cn/minemapapi/v2.0.0/minemap.js"></script>
    <script src="//minedata.cn/minemapapi/v2.0.0/plugins/turf/turf.min.js"></script>
    <script src="//minedata.cn/minemapapi/v2.0.0/plugins/template/template.js"></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
        }

        html, body {
            margin: 0;
            padding: 0;
        }

        #m-btn {
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>
<body>
<div id="map">
</div>
<script>
    //var route = [[116.4066765, 39.9079326], [116.418049, 39.9081795], [116.4177486, 39.9155695], [116.4111611, 39.9154872], [116.4114186, 39.9105497]];

    /**
     * 生成动态粒子图层数据
     * @param data 数据，样例  [[116.38,49.9,3],[116.38,49.9,3]]
     * @param segDistance 每小段长度,默认值为10
     * @param speed 粒子速度，可选值为 1，2，3，4，默认为1，速度最快
     * @returns {{type: string, features: Array}}
     */
    //var mySpriteGeojson = minemap.Template.util.pointArrayToSpriteGeoJson(route);
    //var mySpriteGeojson = minemap.Template.util.pointArrayToSpriteGeoJson(route,10,2);


    minemap.domainUrl = '//minedata.cn';
   minemap.dataDomainUrl = '//datahive.minedata.cn';
   minemap.spriteUrl = '//minedata.cn/minemapapi/v2.0.0/sprite/sprite';
   minemap.serviceUrl = '//minedata.cn/service';
    minemap.accessToken = '25cc55a69ea7422182d00d6b7c0ffa93';
    minemap.solution = 2365;
    var map = new minemap.Map({
        container: 'map',
        style: "//minedata.cn/service/solu/style/id/2365",
        center: [116.41943078360123, 39.90574200433687],
        zoom: 10.3623,
        pitch: 60,
        light: {
        	"anchor":"map",
        	"color":"red",
        	"intensity":0.87,
        	"position":[
        	            1.15,135,45
        	            ]
        }
    });
    
    
    
    var highlightLayer = {
    	    id: 'highlight',
    	    type: 'custom',

    	    onAdd: function (map, gl) {
    	        var vertexSource = "" +
    	        "uniform mat4 u_matrix;" +
    	        "attribute vec2 a_pos;" +
    	        "void main() {" +
    	        "    gl_Position = vec4(a_pos, 0.0, 1.0);" +
    	        "}";

    	        var fragmentSource = "" +
    	        "void main() {" +
    	        "    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);" +
    	        "}";

    	        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    	        gl.shaderSource(vertexShader, vertexSource);
    	        gl.compileShader(vertexShader);
    	        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    	        gl.shaderSource(fragmentShader, fragmentSource);
    	        gl.compileShader(fragmentShader);

    	        this.program = gl.createProgram();
    	        gl.attachShader(this.program, vertexShader);
    	        gl.attachShader(this.program, fragmentShader);
    	        gl.linkProgram(this.program);

    	        this.aPos = gl.getAttribLocation(this.program, "a_pos");

    	        this.buffer = gl.createBuffer();
    	        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
    	        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    	            -0.5, -0.5,
    	            -0.5, 0.5,
    	            0.5, -0.5,
    	            0.5, 0.5
    	        ]), gl.STATIC_DRAW);
    	    },

    	    render: function(gl, matrix) {
    	        gl.useProgram(this.program);
    	        gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
    	        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
    	        gl.enableVertexAttribArray(this.aPos);
    	        gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
    	        gl.enable(gl.BLEND);
    	        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    	        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    	    }
    	};


    map.on('load', function () {
    	map.addLayer(highlightLayer)
    	
    	
    });

</script>
</body>
</html>
